<template>
  <div class="content">
    <xjh-table
      :dataList="dataList"
      :dataCount="dataCount ? dataCount : 0"
      v-bind="ContentTableConfig"
      @tableSelectionChange="tableSelectionChange"
      v-model:page="pageInfo"
    >
      <template #headerHandler>
        <el-button
          size="small"
          type="primary"
          @click="newCreateClick"
          v-if="isCreate"
          :icon="Plus"
          >add</el-button
        >
      </template>
      <!-- <template #status="scope">
        <el-switch v-model="scope.row.status"></el-switch>
      </template> -->
      <template #createAt="{ row }">
        <span>{{ $filters.formatTime(row.createAt) }}</span>
      </template>
      <template #updateAt="{ row }">
        <span>{{ $filters.formatTime(row.updateAt) }}</span>
      </template>
      <template #handler="{ row }">
        <el-button
          size="small"
          type="primary"
          @click="editDataClick(row)"
          v-if="isUpdate"
          :icon="Edit"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(row)"
          v-if="isDelete"
          :icon="Delete"
          >删除</el-button
        >
      </template>
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </xjh-table>
  </div>
</template>

<script lang="ts" setup>
import {
  defineProps,
  computed,
  defineExpose,
  defineEmits,
  ref,
  watch
} from 'vue';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import xjhTable from '@/base-ui/table/index';

import { useStore } from '@/store';
import { ITable } from '@/base-ui';
import { usePermission } from '@/hooks/usePermission';

const emit = defineEmits(['newCreateClick', 'editDataClick']);

const props = defineProps({
  ContentTableConfig: {
    // 这样的处理方式很重要
    type: Object as () => ITable,
    required: true
  },
  pageName: {
    type: String,
    required: true
  }
});

const store = useStore();

// 这里的类型 一定要是可以出现的才能出现作用
const otherPropSlots: any = props.ContentTableConfig.propInfo.filter((item) => {
  if (item.slotName) {
    if (item.slotName == 'createAt') return false;
    if (item.slotName == 'updateAt') return false;
    if (item.slotName == 'handler') return false;
    return true;
  }
  return false;
});

// 权限控制
const isCreate = usePermission(props.pageName, 'create');
const isQuery = usePermission(props.pageName, 'query');
const isDelete = usePermission(props.pageName, 'delete');
const isUpdate = usePermission(props.pageName, 'update');

const dataList = computed(() =>
  store.getters[`system/pageListData`](props.pageName)
);
const dataCount = computed(() =>
  store.getters[`system/pageCount`](props.pageName)
);

const pageInfo = ref({ pageSize: 10, pageNum: 0 });
const tempQueryInfo = ref({});

/* 在watch中 ref的值在进行一个监听的时候是不需要。value的 */
watch(pageInfo, () => getPageData(tempQueryInfo.value));

const getPageData = (queryInfo: any = {}) => {
  if (!isQuery) return;
  tempQueryInfo.value = { ...queryInfo };
  store.dispatch('system/getPageListAction', {
    pageName: props.pageName,
    pageInfo: {
      size: pageInfo.value.pageSize,
      offset: pageInfo.value.pageNum * pageInfo.value.pageSize,
      ...queryInfo
    }
  });
};

// 选中 table的多选
const tableSelectionChange = (val: any) => {
  console.log(val);
};
// 选中 table的多选
const editDataClick = (item: any) => {
  emit('editDataClick', item);
};
// 选中 table的多选
const newCreateClick = () => {
  emit('newCreateClick');
};

// 删除，添加，修改
const handleDelete = (row: any) => {
  store.dispatch('system/deletePageItemAction', {
    id: row.id,
    pageName: props.pageName
  });
};

getPageData();

defineExpose({ getPageData });
</script>

<style lang="less" scoped>
.content {
  margin-top: 30px;
}
</style>
